<template>
	<view>
		<view class="bg"></view>
		<view class="wrapper">
			<!-- 车辆租期信息 -->
			<view class="carTimeWrapper">
				<!-- 车辆 -->
				<view class="carContent">
					<view class="carInfo">
						<view class="carInfo_name">{{carInfo.modelInfo}}</view>
						<view class="carInfo_other">
							<text class="otherValue">{{carInfo.operatingClassification||''}}</text>
							<text class="otherValue">{{carInfo.speedChangingBox||''}}</text>
							<text class="otherValue">{{carInfo.displacement||''}}</text>
							<text class="otherValue">{{carInfo.fuelType||''}}</text>
						</view>
					</view>
					<image class="carImg" :src="carUrl|mmvImageUrl" mode=""></image>
				</view>
				<!-- 租期 -->
				<view class="rentTimeContent">
					<view class="weekInfo">
						<text>{{startTime|week}}</text>
						<text>{{endTime|week}}</text>
					</view>
					<view class="timeInfo">
						<text class="time">{{showSTime}}</text>
						<text class="duration">{{duration}}</text>
						<text class="time">{{showETime}}</text>
					</view>
				</view>

				<!-- 取还车场站信息 -->
				<view class="addressContent">
					<view class="subTitle" style="margin-bottom: 10rpx; font-size: 26rpx;">取还信息</view>
					<!-- 取还车方式 -->
					<view>
						<view class="takeWay">
							<text class="title">取还方式</text>
							<text class="value">{{rentalType|rentalType}}</text>
						</view>

						<view class="storeInfo">
							<view>
								<text class="mark">取</text>
								<text class="title">取车地址</text>
							</view>
							<view class="addressBox" @click.stop="goNaviRoute(1)">
								<text class="value">{{storeName}}</text>
								<view style="display: inline-block;">
									<view class="line"></view>
									<image class="navi" src="/pagesA/static/map_navi.png" mode=""></image>
									<text>地图导航</text>
								</view>

							</view>
						</view>

						<view class="storeInfo">
							<view>
								<text class="mark" style="background-color: #E9F0F4; color: #009CF9;">还</text>
								<text class="title">还车地址</text>
							</view>
							<view class="addressBox" @click.stop="goNaviRoute(2)">
								<text class="value">{{storeName}}</text>
								<view style="display: inline-block;">
									<view class="line"></view>
									<image class="navi" src="/pagesA/static/map_navi.png" mode=""></image>
									<text>地图导航</text>
								</view>

							</view>
						</view>

					</view>

				</view>
			</view>

			<!-- 驾驶员 -->
			<view class="contentBox" v-if="false">
				<view class="subTitle">
					驾驶员
					<text class="rightInfo">*凭驾驶员本人有效证件取车</text>
				</view>
				<view class="driverContent">
					<view class="itemInfo">
						<text class="title">姓名</text>
						<u--input v-model="driverName" placeholder="请填写真实姓名" border="none" fontSize="14" clearable>
						</u--input>
					</view>
					<view class="itemInfo">
						<text class="title">身份证号</text>
						<u--input v-model="driverIdCard" placeholder="请填写身份证号" border="none" fontSize="14" clearable>
						</u--input>
					</view>
					<view class="itemInfo" style="border: none;">
						<text class="title">联系手机</text>
						<u--input v-model="driverPhone" placeholder="请填写联系手机" border="none" fontSize="14" clearable>
						</u--input>
					</view>

					<view class="pickUpInfo">
						<image class="img" src="https://qykh.shopec.com.cn/image-server/dz/pickUp_info.png" mode=""></image>
						<view class="info"><text style="font-weight: bold;">身份证原件：</text>有效期1个月以上</view>
						<view class="info"><text style="font-weight: bold;">驾驶证原件：</text>有效期2个月以上、驾龄需1年以上</view>
						<view class="info"><text style="font-weight: bold;">国内信用卡：</text>有效期1个月以上（免押订单无需 提供）</view>
					</view>
				</view>

			</view>


			<!-- 押金 -->
			<view class="contentBox">
				<view class="subTitle">押金</view>
				<view class="depositContent">
					<view class="payWayWrapper">
						<view class="payItem" v-for="(item, index) in payWays" :key="index"
							@tap="payWayChange(item.depositPayType)">
							<text class="payTitle">{{item.title}}</text>
							<image style="width: 30upx; height: 30upx;"
								:src="currentDepositPayType == item.depositPayType ? '../static/radio_selected.png' : '../static/radio_default.png'"
								mode=""></image>
						</view>
					</view>
					<view class="tableBox">
						<view class="tr">
							<view class="leftBox">
								车辆押金
							</view>
							<view class="rightBox">
								<view>
									<text>¥{{orderInfo.deposit}}</text>
									<text style="color: #1989FA; margin-left: 20rpx; ">可退</text>
								</view>
								<view>
									取车前支付/冻结，还车结算后 原路退还/解冻
								</view>
							</view>
						</view>
						<view class="tr" style="border-bottom: none;">
							<view class="leftBox">
								违章押金
							</view>
							<view class="rightBox">
								<view>
									<text>¥{{orderInfo.illegalDeposit}}</text>
									<text style="color: #1989FA; margin-left: 20rpx; ">可退</text>
								</view>
								<view>
									还车时支付/冻结，还车后10- 30天结算后原路退还/解冻
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>


			<!-- 优惠活动 -->
			<view class="contentBox" v-if="couponList.length > 0">
				<view class="subTitle">
					优惠活动
				</view>
				<view class="promotionsContent">
					<view class="promotionItem" v-if="couponList.length > 0" @tap="showCoupon = true">
						<view class="itemTitle">优惠券</view>
						<view class="itemValue">
							<view v-if="currentCoupon">
								<text>优惠券减免</text>
								<text v-if="currentCoupon.couponCategory==2">-¥{{discount}}</text>
								<text v-else>-¥{{currentCoupon.preferentialMoney}}</text>
							</view>
							<view v-else style="color: #C0C0C0;">请选择优惠券</view>
							<u-icon name="arrow-right" color="#333333" size="10"></u-icon>
						</view>
					</view>
					<view class="promotionItem" v-if="orderInfo.activityDiscoount > 0">
						<view class="itemTitle">活动</view>
						<view class="itemValue">活动特惠车型-¥{{orderInfo.activityDiscoount}}</view>
					</view>
				</view>
			</view>


			<!-- 可选附加服务 -->
			<view class="contentBox" v-if="orderInfo.noMandatoryOtherCostList.length > 0">
				<view class="subTitle" @tap="showAddtional = true">
					可选附加服务
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
				<view class="additionalContent" v-if="currentAddtionalList.length > 0">
					<view class="additionalItem" v-for="(item, index) in currentAddtionalList" :key="index">
						<text class="title">{{item.chargeProjectName}}</text>
						<text class="value">¥{{item.chargeMoney}}</text>
					</view>
				</view>
			</view>


			<!-- 租车必读 -->
			<view class="contentBox">
				<view class="subTitle" @click="clickAll">
					租车必读
					<text class="rightInfo">查看全部</text>
				</view>
				<!-- 取消规则 -->
				<view class="cancleRuleContent" v-if="orderInfo.ruleItemList.length > 0">
					<view class="cancleTitle" style="margin-bottom: 20rpx;">取消规则</view>
					<view class="h-table">
						<view class="h-tr h-thead" style="background-color: #F7F9FA;">
							<view class="h-td" style="width: 300rpx;">取消时间</view>
							<view class="h-td h-td-colspan">扣费标准</view>
						</view>

						<view class="h-tr" v-for="(item, index) in orderInfo.ruleItemList" :key="item.id">
							<template v-if="item.backType == 1">
								<view class="h-td" style="width: 300rpx;">距离取车时间{{item.ruleTime}}小时(含)以上</view>
								<view class="h-td h-td-colspan" style="background-color: #F2FCF7; color : #51C57F">免费取消
								</view>
							</template>
							<template v-if="item.backType == 2">
								<view class="h-td" style="width: 300rpx;">距离取车时间{{item.ruleTime}}小时以内</view>
								<view class="h-td h-td-colspan">
									{{item.ruleBase == 1 ? "订单总金额" : '首日租金' }}的{{item.ruleValue}}%
									作为违约金
								</view>
							</template>
							<template v-if="item.backType == 3">
								<view class="h-td" style="width: 300rpx;">过取车时间未取车</view>
								<view class="h-td h-td-colspan">
									收取{{item.ruleBase == 1 ? "订单总金额" : '首日租金' }}的{{item.ruleValue}}%
									作为违约金</view>
							</template>
						</view>
					</view>
				</view>

			</view>

			<!-- 协议 -->
			<view class="agreementWrapper">
				<text>支付成功及代表您已阅读并同意</text>
				<text style="color: #1989FA;" @click.stop="goAgreent(6)">《用车服务协议》</text>
			</view>


			<!-- 放心之选 -->
			<orderTip></orderTip>

			<!-- 底部总金额确认 -->
			<view class="bottomWrapper">
				<view class="totalPriceContent">
					<view @tap="clickCostDetail">
						<text class="title">在线支付</text>
						<text class="price">{{amount}}</text>
						<text class="priceDetail">明细</text>
					</view>
					<view class="confimBtn" @tap="confimOrder">
						去支付
					</view>
				</view>

			</view>

			<!-- 附加产品 -->
			<u-popup :show="showAddtional" @close="showAddtional = false" closeable round="16">
				<view class="popWrapper">
					<view class="addtionalPopItem" v-for="(item, index) in noMandatoryOtherCostList" :key="index"
						@tap="addtionalChange(item)">
						<text class="title">{{item.chargeProjectName}}</text>
						<text class="value" v-if="item.chargeItemsType == 1">¥{{item.unitPrice + '/次'}}</text>
						<text class="value" v-else-if="item.chargeItemsType == 2">¥{{item.unitPrice + '/天'}}</text>
						<text class="value" v-else-if="item.chargeItemsType == 3">¥{{item.unitPrice + '/km'}}</text>
						<text class="value" v-else-if="item.chargeItemsType == 4">¥{{item.unitPrice + '/小时'}}</text>
						<image style="width: 30upx; height: 30upx;"
							:src="item.selected ? '../static/radio_selected.png' : '../static/radio_default.png'"
							mode="">
						</image>
					</view>
					<view class="addtionalConfimBtn" @tap="confimAddtional">
						确定
					</view>

				</view>

			</u-popup>

			<!-- 优惠券 -->
			<u-popup :show="showCoupon" @close="showCoupon = false" closeable round="16">
				<scroll-view scroll-y="true" class="couponAlertWrapper">
					<view>
						<view class="couponTitle">选择优惠券 <text
								style="margin-left: 20rpx; color: #1989FA;">{{couponList.length}}张可用</text> </view>
						<view class="unUseCoupon" @click.stop="clickUnUseCoupon">
							<text style="font-size: 28rpx;">不使用优惠券</text>
							<image style="width: 42rpx;height: 42rpx;"
								:src="isUseCoupon ? '/pagesA/static/radio_selected.png' : '/pagesA/static/radio_default.png'"
								mode=""></image>
						</view>
						<order-cooupon :index="index" :currentIndex="currentCouponIndex" :couponInfo="item"
							@selectedCoupon="selectedCoupon()" v-for="(item, index) in couponList" :key="index">
						</order-cooupon>
					</view>
				</scroll-view>

			</u-popup>

			<!-- 费用明细 -->
			<view v-if="showCostDetail" class="costWrapper">
				<view class="costContent">
					<view class="titleBox">
						<text>费用明细</text>
						<text style="font-size: 28rpx; color: #999999;" @click.stop="showCostDetail=false">关闭</text>
					</view>
					<!-- 基础费+可选附加项 -->
					<view class="costItem" v-for="(item, index) in costDetailList" :key="index">
						<text>{{item.chargeProjectName}}</text>
						<text>¥{{item.chargeMoney}}</text>
					</view>
					<!-- 优惠券 -->
					<view class="costItem" style="color: #FB423D;" v-if="currentCoupon">
						<text>{{currentCoupon.couponName}}</text>
						<text v-if="currentCoupon.couponCategory == 2">-¥{{discount}}</text>
						<text v-else>-¥{{currentCoupon.preferentialMoney}}</text>
					</view>

				</view>
			</view>

			<must-read v-if="showMustRead" :showMustRead="showMustRead" :orderInfo="orderInfo"
				@close="showMustRead=false">
			</must-read>


		</view>

	</view>



</template>
<script>
	import {
		shortConfirmationOrder,
		shortPayOrder,
		memberCouponList,
		shortCancelOrder,
		luxuryConfirmationOrder,
		luxuryPayOrder
	} from '@/api/order-api.js'
	import {
		storeInfoList,
		planModelInfo
	} from '@/api/home-api.js'
	import {
		meetRequirementMemberCoupon
	} from '@/api/coupon-api.js';

	import orderCooupon from '@/components/home/coupon/order-coupon.vue'
	import mustRead from '@/components/mustRead/mustRead.vue'
	import orderTip from '@/components/layout/home-tips.vue'
	var moment = require('@/utils/moment.js')
	export default {
		components: {
			orderCooupon,
			mustRead,
			orderTip
		},
		data() {
			return {
				payWays: [
					// {
					// 	title: '微信支付分',
					// 	depositPayType: 3,
					// },
					// {
					// 	title: '在线支付',
					// 	depositPayType: 1,
					// },
					{
						title: '线下支付',
						depositPayType: 2,
					}
				],
				carInfo: {},
				carUrl: '',
				planId: '',
				planMealId: '',
				planDay: 0,
				orderInfo: {},
				noMandatoryOtherCostList: [], //附加产品
				couponList: [],
				showAddtional: false, //是否显示附加产品
				showCoupon: false, //是否显示优惠券
				showCostDetail: false, //是否显示费用明细
				currentAddtionalList: [],
				currentDepositPayType: 2, //当前的支付类型
				currentCoupon: null, //当前选择的优惠券
				currentCouponIndex: -1, //当前优惠劵的下标
				checkedAgreenment: false,

				//活动车型模板新增
				businessNo: 1,
				activityId: '',
				rentAmount: 0,
				storeId: '',
				storeName: '',
				storeAddress: '',
				storeLat: '',
				storeLng: '',
				rentalType: 1,
				differentStoresCar: 2,


				showMustRead: false, //是否显示租车必读

				driverName: '', //驾驶员姓名
				driverIdCard: '', //驾驶员身份证号
				driverPhone: this.$store.state.user.userInfo.contactPhone, //驾驶员手机号
				isUseCoupon : false

			}
		},
		computed: {

			tenantId() {
				return this.$store.state.user.tenantId;
			},
			startTime() {
				return this.$store.state.order.startTime;
			},
			endTime() {
				return this.$store.state.order.endTime;
			},
			showSTime() {
				return moment(this.startTime).format('MM月DD日 HH:mm');
			},
			showETime() {
				return moment(this.endTime).format('MM月DD日 HH:mm');
			},
			duration() {
				const date1 = moment(this.startTime);
				const date2 = moment(this.endTime);
				const duration = date2.diff(date1, 'hour'); //相差的总小时数
				const days = Math.floor(duration / 24); //相差的天数
				const hours = duration % 24; //相差的小时数
				var offsetTime;
				if (hours > 0) {
					offsetTime = days + '天' + hours + '小时';
				} else {
					offsetTime = days + '天';
				}
				return offsetTime;
			},
			costDetailList() {
				var costs = [
					...this.orderInfo.chargingItemsVoList
				];
				if (!this.$u.test.isEmpty(this.currentAddtionalList)) { //如果存在附加项
					for (let addtionalItem of this.currentAddtionalList) {
						costs.push(addtionalItem);
					}
				}
				return costs;
			},

			//总金额
			amount: {
				get() {
					var tatalAmount = 0;

					//其他费用
					for (let costItem of this.costDetailList) {
						tatalAmount += Number(costItem.chargeMoney);
					}

					if (this.currentDepositPayType == 1) { //线上支付 = 押金+其他费用总计
						tatalAmount = tatalAmount + this.orderInfo.deposit + this.orderInfo.illegalDeposit;

					} else if (this.currentDepositPayType == 2) { //线下支付 = 其他费用总计

					} else { //微信支付分

					}

					if (!this.$u.test.isEmpty(this.currentCoupon)) { //如果存在优惠券
						if (this.currentCoupon.couponCategory == 2) { //折扣劵
							//优惠券金额
							let couponAmount = this.discount;
							tatalAmount = tatalAmount - couponAmount;
						} else { //立减|满减
							//优惠券金额
							let couponAmount = this.currentCoupon.preferentialMoney;
							tatalAmount = tatalAmount - couponAmount;
						}

					}

					return tatalAmount;
				}
			},

			discount() {
				if (this.currentCoupon) {
					let couponAmount = this.orderInfo.rent * ((10 - this.currentCoupon.discount) / 10);
					let resultAmount = parseFloat(couponAmount).toFixed(2);
					return resultAmount;
				}
				return 0;
			}

		},
		onLoad(op) {
			if (op) {

				this.businessNo = op.businessNo;
				this.storeAddress = op.storeAddress;
				this.storeName = op.storeName;
				this.storeId = op.storeId;
				this.storeLat = op.storeLat;
				this.storeLng = op.storeLng;
				this.planId = op.planId;
				this.carUrl = op.carUrl;
				this.activityId = op.activityId;
				this.rentAmount = op.rentAmount;
			}
			// 获取车型信息
			this.getCarInfo();
			//获取订单信息
			this.getOrderInfo();

		},

		methods: {
			//获取车型信息
			getCarInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				planModelInfo({
					tenantId: this.tenantId,
					planId: this.planId,
					bizType: this.businessNo
				}).then(res => {
					this.carInfo = res.data;
				})
			},

			//订单确认接口
			getOrderInfo() {

				var params = {
					tenantId: this.tenantId,
					planId: this.planId,
					startTime: this.startTime,
					endTime: this.endTime,
					differentStoresCar: this.differentStoresCar,
					takeStoreId: this.storeId,
					alsoStoreId: this.storeId,
					rentalType: this.rentalType,
					rentAmount: this.rentAmount,
				}
				if (this.businessNo == 1) { //短租
					shortConfirmationOrder(params).then(res => {
						uni.hideLoading();
						this.orderInfo = res.data;
						for (let addtionalItem of this.orderInfo.noMandatoryOtherCostList) {
							addtionalItem.selected = false;
						}
						this.noMandatoryOtherCostList = this.orderInfo.noMandatoryOtherCostList;

						this.getCoupon();
					})
				} else if (this.businessNo == 3) { //豪车
					luxuryConfirmationOrder(params).then(res => {
						uni.hideLoading();
						this.orderInfo = res.data;
						for (let addtionalItem of this.orderInfo.noMandatoryOtherCostList) {
							addtionalItem.selected = false;
						}
						this.noMandatoryOtherCostList = this.orderInfo.noMandatoryOtherCostList;
						this.getCoupon();
					})
				}
			},

			// 导航
			goNaviRoute(type) {
				uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: parseFloat(this.storeLat), //要去的纬度-地址
					longitude: parseFloat(this.storeLng), //要去的经度-地址
					name: this.storeName,
					success() {
						console.log('成功了');
					},
					fail(msg) {
						console.log(msg);
					}
				})

			},

			// 获取下单优惠券
			getCoupon() {
				meetRequirementMemberCoupon({
					tenantId: this.tenantId,
					storeId: this.storeId,
					planId: this.planId,
					amount: this.orderInfo.rent,
					bizClassification: this.businessNo,
					pageNo: 1,
					pageSize: 99
				}).then(res => {
					this.couponList = res.data;
				})

			},
			//点击了不使用优惠券
			clickUnUseCoupon() {
				this.currentCoupon = null;
				this.currentCouponIndex = -1;
				this.isUseCoupon = true;
				this.showCoupon = false;
			},
			//当前选择的优惠券选择
			selectedCoupon(couponInfo, index) {
				this.currentCouponIndex = index;
				if (couponInfo.couponCategory == 1) {
					if (this.orderInfo.rent >= couponInfo.conditionMoney) { //如果租金大于优惠券满减金额时
						this.currentCoupon = couponInfo;
						this.showCoupon = false;
					} else {
						this.$u.toast('当前优惠券不可用,请选择其他优惠券');
					}
				} else {
					this.currentCoupon = couponInfo;
					this.showCoupon = false;
				}
                this.isUseCoupon = false;
			},
			
		
			//改变附加产品的状态
			addtionalChange(item) {
				item.selected = !item.selected;
				this.$forceUpdate();
			},
			//改变支付状态
			payWayChange(type) {
				if (type == 3) {
					this.$u.toast('微信支付分功能暂未开通');
				} else {
					this.currentDepositPayType = type;
				}
			},
			//确定选择可选项
			confimAddtional() {
				var currentAddtionalList = [];
				for (let addtionalItem of this.noMandatoryOtherCostList) {
					if (addtionalItem.selected == true) {
						currentAddtionalList.push(addtionalItem);
					}
				}
				this.currentAddtionalList = currentAddtionalList;
				this.showAddtional = false;
			},

			//费用明细
			clickCostDetail() {
				this.showCostDetail = !this.showCostDetail;
			},
			clickAll() {
				this.showMustRead = !this.showMustRead;
			},
			//确认订单
			confimOrder() {

				var couponId;
				if (!this.$u.test.isEmpty(this.currentCoupon)) {
					couponId = this.currentCoupon.memberCouponId;
				}
				var params = {
					tenantId: this.tenantId,
					planId: this.planId,
					startTime: this.startTime,
					endTime: this.endTime,
					rentalType: this.rentalType,
					differentStoresCar: this.differentStoresCar,
					takeStoreId: this.storeId,
					alsoStoreId: this.storeId,
					amount: this.amount,
					deposit: this.orderInfo.deposit,
					rent: this.orderInfo.rent,
					couponId: couponId,
					illegalDeposit: this.orderInfo.illegalDeposit,
					depositPayType: this.currentDepositPayType,
					depositPayWay: this.currentDepositPayType == 1 ? 1 : null,
					rentPayType: 1,
					rentPayWay: 1,
					takeAddress: this.storeAddress,
					takeLon: this.storeLng,
					takeLat: this.storeLat,
					alsoAddress: this.storeAddress,
					alsoLon: this.storeLng,
					alsoLat: this.storeLat,
					costList: this.costDetailList,
					activityId: this.activityId,
					driverName: this.driverName,
					driverIdCard: this.driverIdCard

				}
				uni.showLoading({
					// title: '加载中...'
				})
				if (this.businessNo == 1) { //短租
					shortPayOrder(params).then(res => {
						uni.hideLoading();
						//唤起微信支付
						let data = JSON.parse(res.data.json);
						let amount = res.data.amount;
						let orderNo = res.data.orderNo;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(res) {
								uni.redirectTo({
									url: '/pagesB/activity/activity-paySuccess?orderNo='+orderNo + '&totalPrice='+amount + '&backViewType=1'
								})
							},
							fail: function(err) {

								uni.showToast({
									title: '订单支付失败,请前往订单详情支付',
									icon: 'none'
								})
								uni.navigateBack({
									delta: 10
								})
							}
						});
					})
				} else if (this.businessNo == 3) { //豪车
					luxuryPayOrder(params).then(res => {
						uni.hideLoading();
						//唤起微信支付
						let data = JSON.parse(res.data.json)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(res) {
								uni.$u.toast('支付成功')
								uni.navigateBack({
									delta: 10
								})
							},
							fail: function(err) {

								uni.showToast({
									title: '订单支付失败,请前往订单详情支付',
									icon: 'none'
								})
								uni.navigateBack({
									delta: 10
								})
							}
						});
					})
				}
			},

			goAgreent(type) {
				uni.navigateTo({
					url: '../../pages/guide/guide?type=' + type
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/helang-table.scss';

	.bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 831rpx;
		background: linear-gradient(0deg, #F2F3F5 0%, #3B86F9 100%);
		z-index: -1;
	}

	.wrapper {
		position: relative;
		margin: 20rpx;
		padding-bottom: 160rpx;

	}

	.carTimeWrapper {
		background-color: $bg-white-color;
		border-radius: 16upx;
		padding: 30upx;

		.carContent {
			display: flex;
			align-items: center;

			.carImg {
				width: 320rpx;
				height: 140rpx;
			}

			.carInfo {
				margin-right: 20upx;

				&_name {
					font-size: 34rpx;
					font-weight: bold;
					width: 320rpx;
					color: $text-color-33;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				&_other {
					box-sizing: border-box;
					margin-top: 25upx;

					.otherValue {
						width: 320rpx;
						color: $text-color-33;
						margin-right: 26upx;
						font-size: 22upx;
					}
				}
			}

		}

		.rentTimeContent {
			margin-top: 20upx;
			padding: 20rpx 0;
			border-top: 1rpx solid #FAFAFA;
			border-bottom: 1rpx solid #FAFAFA;

			.weekInfo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #898989;
			}

			.timeInfo {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.time {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;

				}

				.duration {
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					padding: 0 40rpx;
					background: #F3F3F5;
					border-radius: 18rpx;
					font-size: 22rpx;
					color: #333333;
				}
			}
		}

		.addressContent {
			margin-top: 20rpx;
			padding: 0 14rpx;

			.takeWay {
				.title {
					padding: 0 5rpx;
					height: 32rpx;
					line-height: 32rpx;
					text-align: center;
					background: #E9F0F4;
					font-size: 22rpx;
					color: #0087FF;

				}

				.value {
					margin-left: 35rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #313131;
				}

			}

			.storeInfo {
				margin-top: 20rpx;
				color: #333;
				font-size: 22rpx;

				.mark {
					padding: 5rpx;
					background: #EEEEEE;
					font-weight: bold;
				}

				.title {
					margin-left: 16rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
				}

				.addressBox {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					color: #1989FA;
					height: 100%;

					.value {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						max-width: 400rpx;
						margin-left: 46rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.line {
						display: inline-block;
						width: 1rpx;
						height: 40rpx;
						background-color: #FAFAFA;
					}

					.navi {
						margin-left: 56rpx;
						width: 24rpx;
						height: 24rpx;
						position: relative;
						top: 5rpx;
					}
				}
			}
		}
	}

	// 公共盒子样式
	.contentBox {
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: $bg-white-color;
		border-radius: 16rpx;

		.subTitle {
			color: $text-color-33;
			font-size: 34rpx;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.rightInfo {
				color: #1989FA;
				font-size: 24rpx;
				position: absolute;
				right: 30rpx;
			}

		}
	}

	//驾驶员 
	.driverContent {
		.itemInfo {
			display: flex;
			align-items: center;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			border-bottom: 1px solid #FAFAFA;

			.title {
				width: 120rpx;
				font-size: 28rpx;
				color: #6F7375;
				margin-right: 30rpx;
				text-align: left;
			}
		}

		.pickUpInfo {
			margin-top: 20rpx;
			background: #F1F8FF;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #333;
			padding: 60rpx 24rpx 35rpx;
			position: relative;

			.img {
				position: absolute;
				left: 0;
				top: -10rpx;
				width: 178rpx;
				height: 52rpx;
			}

			.info {
				margin-top: 15rpx;
			}
		}
	}

	// 押金
	.depositContent {
		.payWayWrapper {
			.payItem {
				margin: 20rpx 15rpx 0;
				display: flex;
				justify-content: space-between;

				.payTitle {
					font-size: 26rpx;
					color: $text-color-33;

				}
			}
		}

		.tableBox {
			margin-top: 30rpx;
			height: 360rpx;
			border: 1rpx solid #ADB8BF22;

			.tr {
				display: flex;
				height: 179rpx;
				border-bottom: 1rpx solid #ADB8BF22;

				.leftBox {
					width: 40%;
					color: #333;
					height: 179rpx;
					line-height: 179rpx;
					text-align: center;
					font-size: 26rpx;
					background-color: #EEF2F6;
					border-right: 1rpx solid #ADB8BF22;
				}

				.rightBox {
					width: 60%;
					padding: 40rpx;
					color: #333;
					font-size: 24rpx;
				}
			}
		}
	}

	// 可选附加项
	.additionalContent {
		padding-top: 10rpx;

		.additionalItem {
			height: 44upx;
			display: flex;
			justify-content: space-between;
			padding: 20upx 20upx 0;

			.title {
				font-size: 26upx;
				font-weight: bold;
				color: $text-color-33;
			}

			.value {
				font-size: 26upx;
				color: $text-color-33;
			}
		}
	}

	// 优惠活动
	.promotionsContent {
		padding-top: 10rpx;

		.promotionItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 98rpx;
			border-bottom: 1px solid #FAFAFA;

			.itemTitle {
				font-size: 28rpx;
				color: #6F7375;
			}

			.itemValue {
				display: inline-flex;
				font-size: 26rpx;
				color: #EC4863;
			}
		}
	}

	//租车必读(取消规则)
	.cancleRuleContent {
		padding-top: 20rpx;
		font-size: 24rpx;

		.cancleTitle {
			font-size: 28rpx;
			color: #333333;
		}
	}

	//协议
	.agreementWrapper {
		margin: 20rpx;
		font-size: 26rpx;
		color: #333333;
	}

	// 底部
	.bottomWrapper {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 150rpx;
		width: 100%;
		background-color: $bg-white-color;
		box-shadow: 0px 0px 68px 0px #EFF2F4;
		z-index: 9999;

		.totalPriceContent {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 36rpx;
			height: 150rpx;

			.title {
				font-size: 24rpx;
				color: #879094;
			}

			.price {
				margin-left: 10rpx;
				font-size: 34rpx;
				color: #EC4863;

				&::before {
					content: '¥';
					font-size: 24rpx;
				}

			}

			.priceDetail {
				margin-left: 30rpx;
				font-size: 24upx;
				color: #1989FA;
			}

			.confimBtn {
				width: 300rpx;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				color: #fff;
				font-size: 36rpx;
				background: #1989FA;
				border-radius: 24rpx;
			}
		}
	}



	.popWrapper {
		background-color: $bg-white-color;
		padding: 80upx 50upx 20upx;

		.addtionalPopItem {
			margin-top: 10upx;
			// box-shadow: 0 0 68u 0 rgba(69,69,69,0.13); 
			display: flex;
			justify-content: space-between;
			height: 60upx;

			.title {
				font-size: 26upx;
				font-weight: bold;
				color: $text-color-33;
				width: 200upx;
			}

			.value {
				font-size: 26upx;
				color: $text-color-price;

			}
		}

		.addtionalConfimBtn {
			margin-top: 30upx;
			width: 100%;
			height: 90upx;
			line-height: 90upx;
			text-align: center;
			color: $text-color-ff;
			background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
			border-radius: 45upx;
		}
	}

	.couponAlertWrapper {
		background-color: $bg-white-color;
		max-height: 800upx;
		padding-top: 70upx;

		.couponTitle {
			font-size: 28upx;
			font-weight: bold;
			color: $text-color-33;
			margin-left: 30upx;
			margin-bottom: 20upx;
		}

		.unUseCoupon {
			background-color: #fff;
			box-shadow: 0px 0px 65rpx 0px #E9E9E9;
			border-radius: 20rpx;
			margin: 20rpx;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
		}
	}


	.costWrapper {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 150rpx;
		top: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 222;

		.costContent {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: $bg-white-color;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			padding: 50rpx 40rpx 10rpx;

			.titleBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 50rpx;

				.title {
					font-size: 34rpx;
					font-weight: bold;
					color: #333333;
				}
			}

			.costItem {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
